<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>
            前端百宝箱
        </title>
        <style type="text/css">
            body { padding-top: 60px; padding-bottom: 20px; }
        </style>
        <link href="css/bootstrap.css" rel="stylesheet">
		<link href="js/google-code-prettify/prettify.css" rel="stylesheet">
		<link href="css/main.css" rel="stylesheet">
        <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
            </script>
        <![endif]-->
    </head>
    
    <body onload="prettyPrint()">
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">前端百宝箱</a>
          <div class="btn-group pull-right">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
              <i class="icon-user"></i> 下拉导航
              <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
              <li><a href="index.html">首页</a></li>
              <li class="divider"></li>
              <li><a href="html.html">HTML</a></li>
              <li class="divider"></li>
              <li><a href="css.html">CSS</a></li>
              <li class="divider"></li>
              <li><a href="javascript.html">JavaScript</a></li>
			  <li class="divider"></li>
			  <li><a href="tools.html">工具</a></li>
			  <li class="divider"></li>
			  <li><a href="resources.html">资源</a></li>
            </ul>
          </div>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="index.html">首页</a></li>
              <li class="active"><a href="html.html">HTML</a></li>
              <li><a href="css.html">CSS</a></li>
              <li><a href="javascript.html">JavaScript</a></li>
			  <li><a href="tools.html">工具</a></li>
			  <li><a href="resources.html">资源</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <!--<li class="nav-header"><i class="icon-bookmark"></i>编写技巧</li>
              <li class="active"><a href="#practice"><i class="icon-book icon-white"></i>HTML 编写技巧</a></li>-->
            </ul>
          </div>
			<!--<div class="well sidebar-nav">
				<ul class="nav nav-pills nav-stacked">
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">介绍</a></li>
					<li><a href="#">消息</a></li>
				</ul>
			</div>-->
        </div>
        <div class="span9">
			<!--section begin-->
			<section id="practice">
				<div class="well">
				<h2>HTML 编写技巧</h2>
				<p>积累 HTML 编写最佳实践，这些都是优秀的总结。</p>
				</div>
				<div class="row-fluid">
				  <h4 id="1">HTML5 文档类型声明</h4>
				  <p>开发支持 HTML5 的最简单方式就是声明如下文档类型</p>
<pre class="prettyprint lang-html linenums">
&lt;!DOCTYPE html&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="3">使用最新IE版本</h4>
				  <p>IE=edge 为使用最新IE版本，chrome=1 为使用了 Google Chrome Frame 的浏览器使用 Chrome</p>
<pre class="prettyprint lang-html linenums cv">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="4">添加语音搜索功能</h4>
				  <p>只有Chrome 11 以上版本能支持。</p>
<pre class="prettyprint lang-html linenums cv">
<input id="search" name="search" type="text" x-webkit-speech x-webkit-grammar="builtin:translate"/>
</pre>
				</div>
				<div class="row-fluid">
				  <h4 id="5">内容自适应居中</h4>
				  <p>自适应居中最简单的方式。</p>
<pre class="prettyprint lang-html linenums cv">
<table width="100%" height="100%">
	<tbody><tr><td align="center" valign="middle"><img src="apple.png"/></td></tr></tbody>
</table>
</pre>
				</div>
			</section><!--section end-->

        </div>
        </div>
		<hr>
		<footer>
			<p>
				Hongbo Li &copy; 2012 Powered by
				<a href="docs/bootstrap/index.html" target="_blank">
					Bootstrap
				</a>
			</p>
		</footer>
      </div><!--/row-->
		<script src="js/jquery-1.7.1.min.js"></script>
		<script src="js/main.js"></script>
		<script src="js/google-code-prettify/prettify.js"></script>
        <script src="js/bootstrap.js"></script>

    </body>
</html>
